<template>
  <div class="chat_with" :style="{height: containerHeight + 'px'}">
    <div class="left_aside" :height="containerHeight + 'px'">
      <nav>
        <li @click="cutoverList('Friend')">
          <el-tooltip class="item" effect="dark" content="好友" placement="right">
            <el-badge v-if="$store.state.imMessage.currentChatterUserList[$store.state.imUserList.userIndex].chatNumber" is-dot class="item" type="success">
              <el-button circle><svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-user"></use></svg></el-button>
            </el-badge>
            <el-button v-else circle><svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-user"></use></svg></el-button>
          </el-tooltip>
        </li>
        <li @click="cutoverList('myGrou')">
          <el-tooltip class="item" effect="dark" content="我的群聊" placement="right">
            <el-badge v-if="$store.state.imMessage.currentChatterUserList[$store.state.imUserList.userIndex].groupchatNumber" is-dot class="item" type="success">
              <el-button circle><svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-team"></use></svg></el-button>
            </el-badge>
            <el-button v-else circle><svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-team"></use></svg></el-button>
          </el-tooltip>
        </li>
        <!--<li @click="cutoverList('openGrou')">
          <el-tooltip class="item" effect="dark" content="公开群聊" placement="right">
            <el-button circle><svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-addteam"></use></svg></el-button>
          </el-tooltip>
        </li>-->
        <li>
          <el-tooltip class="item" effect="dark" content="黑名单" placement="right">
            <el-button circle><svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-deleteuser"></use></svg></el-button>
          </el-tooltip>
        </li>
        <li>
          <el-tooltip class="item" effect="dark" content="设置" placement="right">
            <el-button circle><svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-setting"></use></svg></el-button>
          </el-tooltip>
        </li>
        <li>
          <el-tooltip class="item" effect="dark" content="说明" placement="right">
            <el-button circle><svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-question"></use></svg></el-button>
          </el-tooltip>
        </li>
      </nav>
    </div>
    <div class="right_main">
      <!-- 好友列表 -->
      <div v-if="activeList === 'Friend'" class="user_list">
        <div class="user_item" v-for="(item, index) in friendList" :key="item.jid + '_' + index" :class="activeUser === index ? 'active' : ''" @click="viewCurrentChatterUser(index)">
          <img src="../assets/img/user_log.png" alt="">
          <div class="text_body">
            <div class="user_name">{{item.name}}</div>
            <p>{{item.data}}</p>
          </div>
          <div class="time_text">
            <span class="date">{{item.delay | dataFormat('MM-dd hh:mm')}}</span>
            <el-badge v-if="item.megNumber > 0" :value="item.megNumber" :max="99" class="item">
              <span class="mag_number"></span>
            </el-badge>
          </div>
        </div>
      </div>
      <!-- 我的群列表 -->
      <div v-if="activeList === 'myGrou'" class="user_list">
        <div class="user_item" v-for="(item, index) in groupList" :key="item.groupid + '_' + index" :class="activeGroup === index ? 'active' : ''" @click="viewCurrentChatterUser(index)">
          <img src="../assets/img/user_log.png" alt="">
          <div class="text_body">
            <div class="user_name">{{item.groupname}} <el-tag type="success" size="mini">群</el-tag></div>
            <p>{{item.data}}</p>
          </div>
          <div class="time_text">
            <span class="date">{{item.delay | dataFormat('MM-dd hh:mm')}}</span>
            <el-badge v-if="item.megNumber > 0" :value="item.megNumber" :max="99" class="item">
              <span class="mag_number"></span>
            </el-badge>
          </div>
        </div>
      </div>
      <div class="chat_record">
        <!-- 好友头像 -->
        <div v-if="activeList === 'Friend'" class="user_item">
          <img src="../assets/img/user_log.png" alt="">
          <div class="text_body">
            <div class="user_name">{{currentChatterUser.name}}</div>
            <p>在线</p>
          </div>
          <div class="time_text">
            <el-dropdown @command="clickCommand">
              <el-button type="text">
                <i class="el-icon-more"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="add">添加好友</el-dropdown-item>
                <el-dropdown-item command="black">加黑名单</el-dropdown-item>
                <el-dropdown-item command="remove">删除好友</el-dropdown-item>
                <el-dropdown-item command="clear">清空聊天</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <!-- 群头像 -->
        <div v-if="activeList === 'myGrou'"  class="user_item">
          <img src="../assets/img/user_log.png" alt="">
          <div class="text_body">
            <div class="user_name">{{currentChatterUser.groupname}}</div>
            <p>聊天中...</p>
          </div>
          <div class="time_text">
            <el-dropdown>
              <el-button type="text">
                <i class="el-icon-more"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>切出群成员</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <div class="chat_record_body" ref="messageBox">
          <!-- 好友消息展示 -->
          <div v-if="activeList === 'Friend'" v-for="item in setViewTextList" :key="item.id" :class="item.from === $store.state.imUserList.user.name ? 'item_text right' : 'item_text left'">
            <div class="p_text ">
              <div v-if="item.type === 'chat'" v-html="item.data" class="Compile_body_format">{{item.data}}</div>
              <div v-if="item.type === 'img'" class="Compile_body_format"><img :src="item.url" alt=""></div>
              <div v-if="item.type === 'file'" class="Compile_body_format">
                <div class="text_dow_name">文件 <span>{{item.file_length | getSizeKb}}</span></div>
                <strong>{{item.filename}}</strong>
                <a class="a_dow" :href="item.url" :download="item.filename">【点击下载】</a>
              </div>
              <span>{{item.delay | dataFormat('MM-dd hh:mm')}}</span>
            </div>
          </div>
          <!-- 群消息展示 -->
          <div v-if="activeList === 'myGrou'" v-for="item in setViewTextList" :key="item.id" :class="item.from === $store.state.imUserList.user.name ? 'item_text right' : 'item_text left'">
            <div class="p_text ">
              <div class="user_name">{{item.from}}</div>
              <div v-if="item.type === 'groupchat'" v-html="item.data" class="Compile_body_format">{{item.data}}</div>
              <div v-if="item.type === 'img'" class="Compile_body_format"><img :src="item.url" alt=""></div>
              <div v-if="item.type === 'file'" class="Compile_body_format">
                <div class="text_dow_name">文件 <span>{{item.file_length | getSizeKb}}</span></div>
                <strong>{{item.filename}}</strong>
                <a class="a_dow" :href="item.url" :download="item.filename">【点击下载】</a>
              </div>
              <span>{{item.delay | dataFormat('MM-dd hh:mm')}}</span>
            </div>
          </div>
        </div>
        <div class="footer_enter">
          <el-popover
              placement="top"
              width="250"
              trigger="click">
            <div class="img_list">
              <div class="img_item" v-for="(item, index) in imgList" :key="item + '_' + index" @click="setInput(item)">{{item}}</div>
            </div>
            <el-button slot="reference" type="text">
              <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-smile"></use></svg>
            </el-button>
          </el-popover>
          <textarea class="enter_input" v-model="enter_input" type="text" @keyup.enter="sendPrivateText()" placeholder="请输入"></textarea>
          <el-button type="text" @click="sendPrivateText">
            <svg t="1574134660962" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1908" width="200" height="200"><path d="M0 524.8l281.6 166.4 582.4-531.2L384 704l384 128 256-832zM384 985.6L512 832l-128-64z" fill="#1788EB" p-id="1909"></path></svg>
          </el-button>
          <el-button type="text" class="file_btn">
            <input type="file" ref="imgDom" @change="updateImg">
            <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-image"></use></svg>
          </el-button>
          <el-button type="text" class="file_btn">
            <input type="file" ref="fileDom"  @change="updateFile">
            <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-attachment"></use></svg>
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'hx-add-user-view',
  components: {},
  data () {
    return {
      activeList: 'Friend', // 显示的列表
      userName: '', // 本人名称
      enter_input: '', // 消息内容
      imgList: '', // 表情包
      setViewTextList: [], // 聊天记录
      activeUser: 0,
      activeGroup: 0,
      containerHeight: window.innerHeight - 134 || document.documentElement.clientHeight - 134 || document.body.clientHeight - 134,
      friendList: [], // 好友列表
      groupList: [], // 群列表
      openGroupList: [], // 公开群列表
      blackList: [], // 黑名单列表
      currentChatterUser: {
        jid: '',
        name: '', // 接收消息的用户
        groupid: '', // 接收消息的群
        groupname: '', // 消息的群名
        subscription: ''
      }
    }
  },
  props: {},
  filters: {
    dataFormat (value, fmt) {
      if (value) {
        let getDate = new Date(value)
        let o = {
          'M+': getDate.getMonth() + 1,
          'd+': getDate.getDate(),
          'h+': getDate.getHours(),
          'm+': getDate.getMinutes(),
          's+': getDate.getSeconds(),
          'q+': Math.floor((getDate.getMonth() + 3) / 3),
          'S': getDate.getMilliseconds()
        }
        if (/(y+)/.test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (getDate.getFullYear() + '').substr(4 - RegExp.$1.length))
        }
        for (let k in o) {
          if (new RegExp('(' + k + ')').test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
          }
        }
        return fmt
      } else {
        return ''
      }
    },
    getSizeKb (size) {
      let val = 0
      if (size < 1048576) val = (size / 1024).toFixed(2) + 'KB'
      else if (size === 1048576) val = '1MB'
      else if (size > 1048576 && size < 1073741824) val = (size / (1024 * 1024)).toFixed(2) + 'MB'
      else if (size > 1048576 && size === 1073741824) val = '1GB'
      else if (size > 1073741824 && size < 1099511627776) val = (size / (1024 * 1024 * 1024)).toFixed(2) + 'GB'
      else val = '文件超过1TB'
      return val !== 0 ? val : ''
    }
  },
  watch: {
    // 监听消息树变化
    '$store.state.imMessage.currentChatterUserList': {
      handler: function (newData, oldData) {
        // 刷新当前聊天记录
        this.getUserMassgeIndex()
        // 刷新用户未读消息数
        this.viewFriendMessage()
      },
      deep: true
    }
  },
  methods: {
    // 初始化
    init () {
      let _this = this
      setTimeout(function () {
        _this.setEmoji() // 初始化表情包
        _this.getFriendList()
      }, 500)
    },
    /**
     * 好友 群组的方法
     *------------------------------------------------------------- */
    // 拉黑当前好友
    blackFriend () {
      let _this = this
      this.$imConn.addToBlackList({
        name: [_this.currentChatterUser.name],
        success: function () {
          // 拉取一下当前好友
          _this.getFriendList()
          console.log('成功拉黑好友')
        },
        error: function () {
          console.log('拉黑失败')
        }
      })
    },
    // 删除当前好友
    removeFriend () {
      let _this = this
      this.$imConn.removeRoster({
        to: _this.currentChatterUser.name,
        success: function () { // 删除成功
          _this.$imConn.unsubscribed({
            to: _this.currentChatterUser.name
          })
          // 拉取一下当前好友
          _this.getFriendList()
        },
        error: function () { // 删除失败
        }
      })
    },
    // 拉取好友列表
    getFriendList () {
      let _this = this
      this.$imConn.getRoster({
        success: function (roster) {
          _this.friendList = []
          roster.forEach(item => {
            if (item.subscription === 'both' || item.subscription === 'to') {
              _this.friendList.push(item)
            }
          })
          // 显示第一个好友
          _this.viewCurrentChatterUser(_this.activeUser)
          // 显示未读消息
          _this.viewFriendMessage()
        }
      })
    },
    // 显示好友未读消息数量
    viewFriendMessage () {
      if (this.activeList === 'Friend') {
        this.$store.state.imMessage.currentChatterUserList[this.$store.state.imUserList.userIndex].list.forEach(item => {
          if (item) {
            var index = this.friendList.findIndex((profile) => profile.name === item.from)
            this.friendList[index] = {
              ...this.friendList[index],
              data: item.data || '',
              megNumber: item.megNumber,
              delay: item.delay
            }
          }
        })
      }
      if (this.activeList === 'myGrou') {
        this.$store.state.imMessage.currentChatterUserList[this.$store.state.imUserList.userIndex].grouplist.forEach(item => {
          if (item) {
            var index = this.groupList.findIndex((profile) => profile.groupid === item.to)
            this.groupList[index] = {
              ...this.groupList[index],
              data: item.data || '',
              megNumber: item.megNumber,
              delay: item.delay
            }
          }
        })
      }
    },
    // 切换聊天人  群
    viewCurrentChatterUser (index) {
      if (this.activeList === 'Friend') {
        this.currentChatterUser = {
          ...this.currentChatterUser,
          ...this.friendList[index]
        }
        this.$store.state.imMessage.currentChatterUser = {
          ...this.$store.state.imMessage.currentChatterUser,
          ...this.friendList[index]
        }
        this.activeUser = index
      }
      if (this.activeList === 'myGrou') {
        this.currentChatterUser = {
          ...this.currentChatterUser,
          ...this.groupList[index]
        }
        this.$store.state.imMessage.currentChatterUser = {
          ...this.$store.state.imMessage.currentChatterUser,
          ...this.groupList[index]
        }
        this.activeGroup = index
      }
      // 获取当前聊天用户下标
      this.getUserMassgeIndex()
      localStorage.setItem('stateData', JSON.stringify(this.$store.state))
    },
    // 拉取我的群组
    getUserGroup () {
      let _this = this
      _this.groupList = []
      var options = {
        success: function (resp) {
          _this.groupList = resp.data
          _this.viewCurrentChatterUser(_this.activeGroup)
          // 显示未读消息
          _this.viewFriendMessage()
        },
        error: function (e) {
        }
      }
      this.$imConn.getGroup(options)
    },
    // 拉取公开群组
    getOpenGroup () {
      let _this = this
      var options = {
        limit: 20, // 预期每页获取的记录数
        cursor: 1, // 游标
        success: function (resp) {
          resp.forEach(item => {
            _this.groupList.push(item)
          })
        },
        error: function (e) {}
      }
      this.$imConn.listGroups(options)
    },
    /**
     * 消息类型的方法
     *------------------------------------------------------------- */
    // 表情包
    setEmoji () {
      this.imgList = this.$WebIM.NewEmoji.map
    },
    // 清空聊天记录
    clearFriend () {
      this.$store.state.imMessage.currentChatterUserList[this.$store.state.imUserList.userIndex].list[this.$store.state.imMessage.magIndex].list = []
      localStorage.setItem('stateData', JSON.stringify(this.$store.state))
    },
    // 添加表情到消息中
    setInput (item) {
      this.enter_input = this.enter_input + item
    },
    // 发送文字消息
    sendPrivateText () {
      if (this.activeList === 'Friend') {
        this.friendText()
      }

      if (this.activeList === 'myGrou') {
        this.groupText()
      }
    },
    // 发送文件
    updateFile (e) {
      let _this = this
      // eslint-disable-next-line new-cap
      let file = new this.$WebIM.utils.getFileUrl(e.target)
      if (!file.filename) {
        this.$refs.fileDom.value = null
        return false
      }
      let id = this.$imConn.getUniqueId() // 生成本地消息id
      // eslint-disable-next-line new-cap
      let msg = new this.$WebIM.message('file', id) // 创建图片消息
      msg.set({
        apiUrl: this.$WebIM.config.apiURL,
        file: file,
        ext: {
          file_length: file.data.size
        },
        to: _this.activeList === 'Friend' ? _this.currentChatterUser.name : _this.currentChatterUser.groupid, // 接收消息对象
        roomType: _this.activeList !== 'Friend',
        // eslint-disable-next-line handle-callback-err
        onFileUploadError: function (error) {
          console.log('文件上传失败')
        },
        onFileUploadComplete: function (data) {
          console.log(data)
          let url = data.uri + '/' + data.entities[0].uuid
          if (_this.activeList === 'Friend') { // 私聊
            _this.$store.state.imMessage.currentChatterUserList[_this.$store.state.imUserList.userIndex].list[_this.$store.state.imMessage.magIndex].list.push({
              from: _this.$store.state.imUserList.user.name,
              to: _this.currentChatterUser.name,
              data: _this.enter_input,
              filename: file.filename,
              url: url,
              file_length: file.data.size,
              delay: new Date(),
              type: 'file'
            })
          }
          if (_this.activeList === 'myGrou') { // 群聊
            _this.$store.state.imMessage.currentChatterUserList[_this.$store.state.imUserList.userIndex].grouplist[_this.$store.state.imMessage.magGroupIndex].list.push({
              from: _this.$store.state.imUserList.user.name,
              to: _this.currentChatterUser.groupid,
              data: _this.enter_input,
              filename: file.filename,
              url: url,
              file_length: file.data.size,
              delay: new Date(),
              type: 'file'
            })
          }
          localStorage.setItem('stateData', JSON.stringify(_this.$store.state))
        },
        success: function (id) {
          console.log('文件上传成功')
        }
      })
      if (_this.activeList !== 'Friend') {
        msg.setGroup('groupchat')
      }
      this.$imConn.send(msg.body)
    },
    // 发送图片
    updateImg (e) {
      let _this = this
      // eslint-disable-next-line new-cap
      let file = new this.$WebIM.utils.getFileUrl(e.target)
      if (!file.filename) {
        this.$refs.imgDom.value = null
        return false
      }
      let id = this.$imConn.getUniqueId() // 生成本地消息id
      // eslint-disable-next-line new-cap
      let msg = new this.$WebIM.message('img', id) // 创建图片消息
      msg.set({
        apiUrl: this.$WebIM.config.apiURL,
        file: file,
        to: _this.activeList === 'Friend' ? _this.currentChatterUser.name : _this.currentChatterUser.groupid, // 接收消息对象
        roomType: _this.activeList !== 'Friend',
        // eslint-disable-next-line handle-callback-err
        onFileUploadError: function (error) {
          console.log('图片上传失败')
        },
        onFileUploadComplete: function (data) {
          console.log(data)
          let url = data.uri + '/' + data.entities[0].uuid
          if (_this.activeList === 'Friend') { // 私聊
            _this.$store.state.imMessage.currentChatterUserList[_this.$store.state.imUserList.userIndex].list[_this.$store.state.imMessage.magIndex].list.push({
              from: _this.$store.state.imUserList.user.name,
              to: _this.currentChatterUser.name,
              data: _this.enter_input,
              filename: file.filename,
              url: url,
              delay: new Date(),
              type: 'img'
            })
          }
          if (_this.activeList === 'myGrou') { // 群聊
            _this.$store.state.imMessage.currentChatterUserList[_this.$store.state.imUserList.userIndex].grouplist[_this.$store.state.imMessage.magGroupIndex].list.push({
              from: _this.$store.state.imUserList.user.name,
              to: _this.currentChatterUser.groupid,
              data: _this.enter_input,
              filename: file.filename,
              url: url,
              delay: new Date(),
              type: 'img'
            })
          }
          localStorage.setItem('stateData', JSON.stringify(_this.$store.state))
        },
        success: function (id) {
          console.log('图片上传成功')
        }
      })
      if (_this.activeList !== 'Friend') {
        msg.setGroup('groupchat')
      }
      this.$imConn.send(msg.body)
    },
    // 发好友消息
    friendText () {
      let _this = this
      let id = this.$imConn.getUniqueId() // 生成本地消息id
      // eslint-disable-next-line new-cap
      let msg = new this.$WebIM.message('txt', id) // 创建文本消息
      msg.set({
        msg: _this.enter_input, // 消息内容
        to: _this.currentChatterUser.name, // 接收消息对象（用户id）
        roomType: false,
        ext: {}, // 扩展消息
        success: function (id, serverMsgId) {
          console.log('消息发送成功')
          _this.$store.state.imMessage.currentChatterUserList[_this.$store.state.imUserList.userIndex].list[_this.$store.state.imMessage.magIndex].list.push({
            from: _this.$store.state.imUserList.user.name,
            to: _this.currentChatterUser.name,
            data: _this.enter_input,
            delay: new Date(),
            type: 'chat'
          })
          _this.enter_input = ''
          localStorage.setItem('stateData', JSON.stringify(_this.$store.state))
        }, // 对成功的相关定义，sdk会将消息id登记到日志进行备份处理
        fail: function (e) {
          console.log('消息发送失败')
        } // 对失败的相关定义，sdk会将消息id登记到日志进行备份处理
      })
      this.$imConn.send(msg.body)
    },
    // 发群消息
    groupText () {
      let _this = this
      let id = this.$imConn.getUniqueId() // 生成本地消息id
      // eslint-disable-next-line new-cap
      let msg = new this.$WebIM.message('txt', id) // 创建文本消息
      msg.set({
        msg: _this.enter_input, // 消息内容
        to: _this.currentChatterUser.groupid, // 接收消息对象(群组id)
        roomType: false, // 群聊类型，true时为聊天室，false时为群组
        chatType: 'group',
        ext: {}, // 扩展消息
        success: function () {
          console.log('消息发送成功')
          _this.$store.state.imMessage.currentChatterUserList[_this.$store.state.imUserList.userIndex].grouplist[_this.$store.state.imMessage.magGroupIndex].list.push({
            from: _this.$store.state.imUserList.user.name,
            to: _this.currentChatterUser.groupid,
            data: _this.enter_input,
            delay: new Date(),
            type: 'groupchat'
          })
          _this.enter_input = ''
          localStorage.setItem('stateData', JSON.stringify(_this.$store.state))
        }, // 对成功的相关定义，sdk会将消息id登记到日志进行备份处理
        fail: function () {
          console.log('消息发送失败')
        } // 对失败的相关定义，sdk会将消息id登记到日志进行备份处理
      })
      msg.setGroup('groupchat')
      this.$imConn.send(msg.body)
    },
    // 获取当前聊天人 聊天群下标  消息下标
    getUserMassgeIndex () {
      if (this.activeList === 'Friend') {
        if (this.$store.state.imMessage.currentChatterUserList[this.$store.state.imUserList.userIndex]) {
          // 清除当前用户未读消息数
          this.$store.state.imMessage.currentChatterUserList[this.$store.state.imUserList.userIndex].chatNumber = false
          // 获取下标
          let index = this.$store.state.imMessage.currentChatterUserList[this.$store.state.imUserList.userIndex].list.findIndex((item) => item.from === this.$store.state.imMessage.currentChatterUser.name)
          if (index !== -1) {
            this.$store.state.imMessage.magIndex = index
            // 将未读标识清空
            this.$store.state.imMessage.currentChatterUserList[this.$store.state.imUserList.userIndex].list[index].megNumber = 0
            this.setTextList()
          } else {
            this.setViewTextList = []
            // 填充一个空对象进去
            this.$store.state.imMessage.currentChatterUserList[this.$store.state.imUserList.userIndex].list.push({
              list: [],
              from: this.currentChatterUser.name,
              to: this.$store.state.imUserList.user.name,
              megNumber: 0,
              data: '', // 最新的一条消息
              type: 'chat'
            })
          }
          localStorage.setItem('stateData', JSON.stringify(this.$store.state))
        } else {
          this.setViewTextList = []
        }
      }
      if (this.activeList === 'myGrou') {
        if (this.$store.state.imMessage.currentChatterUserList[this.$store.state.imUserList.userIndex]) {
          // 清除当前用户未读消息数
          this.$store.state.imMessage.currentChatterUserList[this.$store.state.imUserList.userIndex].groupchatNumber = false
          // 获取下标
          let index = this.$store.state.imMessage.currentChatterUserList[this.$store.state.imUserList.userIndex].grouplist.findIndex((item) => item.to === this.$store.state.imMessage.currentChatterUser.groupid)
          if (index !== -1) {
            this.$store.state.imMessage.magGroupIndex = index
            // 将未读标识清空
            this.$store.state.imMessage.currentChatterUserList[this.$store.state.imUserList.userIndex].grouplist[index].megNumber = 0
            this.setTextList()
          } else {
            this.setViewTextList = []
            // 填充一个空对象进去
            this.$store.state.imMessage.currentChatterUserList[this.$store.state.imUserList.userIndex].grouplist.push({
              list: [],
              from: this.$store.state.imUserList.user.name,
              to: this.currentChatterUser.groupid,
              megNumber: 0,
              data: '', // 最新的一条消息
              type: 'groupchat'
            })
          }
          localStorage.setItem('stateData', JSON.stringify(this.$store.state))
        } else {
          this.setViewTextList = []
        }
      }
    },
    // 赋值消息列表
    setTextList () {
      if (this.activeList === 'Friend') {
        this.setViewTextList = this.$store.state.imMessage.currentChatterUserList[this.$store.state.imUserList.userIndex].list[this.$store.state.imMessage.magIndex].list
      }

      if (this.activeList === 'myGrou') {
        this.setViewTextList = this.$store.state.imMessage.currentChatterUserList[this.$store.state.imUserList.userIndex].grouplist[this.$store.state.imMessage.magGroupIndex].list
      }
      // 将滚动条拉到最下面
      this.scrollBottom()
    },
    /**
     * 公共方法
     *------------------------------------------------------------- */
    // 切换 好友/群组  列表
    cutoverList (type) {
      // 切换列表
      this.activeList = type
      if (type === 'Friend') {
        this.friendList = [] // 重置好友列表
        this.getFriendList()
      }
      if (type === 'myGrou') {
        this.groupList = [] // 重置群
        this.getUserGroup()
      }
      if (type === 'openGrou') {
        this.openGroupList = [] // 重置公开群
        this.getOpenGroup()
      }
    },
    // 保证消息拉到最底下
    scrollBottom () {
      const _this = this
      setTimeout(() => {
        _this.$refs.messageBox.scrollTop = _this.$refs.messageBox.scrollHeight
      }, 100)
    },
    // 点击 添加好友  删除好友  拉黑好友
    clickCommand (type) {
      if (type === 'add') {
      }
      if (type === 'black') {
        this.blackFriend()
      }
      if (type === 'remove') {
        this.removeFriend()
      }
      if (type === 'clear') {
        this.clearFriend()
      }
    }
  },
  computed: {
  },
  created () {
    const that = this
    window.onresize = () => {
      return (() => {
        window.containerHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
        that.containerHeight = window.containerHeight - 134
      })()
    }
  },
  mounted () {
  },
  destroyed () {
  }
}
</script>
<style lang="scss" scoped>
  .chat_with{
    margin: -20px;
    height: 100%;
    display: flex;
    .left_aside{
      background-color: #E6EBFC;
      width: 120px;
      min-width: 120px;
      height: 100%;
      padding: 10px;
      .news_message{
        width:100%;
        line-height:30px;
        display: block;
        background:rgba(72,128,255,1);
        border-radius:27px;
        text-align: center;
        color: #FFFFFF;
        font-size: 14px;
      }
      nav{
        padding: 20px 0;
        li{
          list-style: none;
          margin-bottom: 30px;
          text-align: center;
          svg{
            color: #999999;
            font-size: 20px;
          }
        }
      }
    }
    .right_main{
      display: flex;
      width: 100%;
      .user_list{
        width: 300px;
        min-width: 300px;
        z-index: 9;
        box-shadow:5px 0px 8px 0px rgba(147, 147, 147, 0.14);
        height: 100%;
        overflow: auto;
        .user_item{
          width: 100%;
          height: 100px;
          background: #F7F9FC;
          padding: 20px 10px;
          display: flex;
          justify-content: space-between;
          cursor: pointer;
          border-bottom: 1px solid #efefef;
          img{
            width: 38px;
            height: 38px;
          }
          .text_body{
            padding: 0 10px;
            width: 60%;
            .user_name{
              font-size: 14px;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
              position: relative;
              padding-right: 30px;
              line-height: 20px;
              span{
                position: absolute;
                right: 0;
              }
            }
            p{
              color: #999999;
              font-size: 12px;
              margin: 10px 0;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
            }
          }
          .time_text{
            height: 100%;
            .date{
              margin-bottom: 15px;
              display: block;
              width: 80px;
            }
            .mag_number{
              width: 65px;
              height: 5px;
              display: block;
            }
          }
        }
        .active{
          background-color: #FFFFFF;
        }
      }
      .chat_record{
        width: 100%;
        position: relative;
        .user_item{
          width: 100%;
          height: 70px;
          background: #FFFFFF;
          padding: 20px;
          display: flex;
          cursor: pointer;
          border-bottom: 1px solid #efefef;
          justify-content: space-between;
          img{
            width: 38px;
            height: 38px;
          }
          .text_body{
            padding: 0 15px;
            width: 100%;
            .user_name{
              font-size: 14px;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
            }
            p{
              color: #999999;
              font-size: 12px;
              margin: 5px 0;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
            }
          }
        }
        .chat_record_body{
          height: calc(100% - 70px);
          overflow: auto;
          padding: 35px 15px 100px;
          .item_text{
            position: relative;
            .user_name{
              position: absolute;
              top: -20px;
              left: 0;
              color: #999999;
            }
            .p_text{
              padding: 15px 15px 25px 15px;
              border-radius: 20px;
              max-width: 80%;
              min-width: 120px;
              display: inline-block;
              position: relative;
              margin-bottom: 35px;
              background:rgba(248,248,248,1);
              box-shadow:0px 2px 5px 0px rgba(147, 147, 147, 0.35);
              .Compile_body_format{
                color: #65656F;
                font-size: 14px;
                margin: 0;
              }
              span{
                position: absolute;
                right: 25px;
                bottom: 5px;
                color: #65656F;
                font-size: 12px;
              }
              .text_dow_name{
                border-bottom: 1px solid #999999;
                font-size: 18px !important;
                display: block;
                padding: 5px 0;
                margin-bottom: 5px;
                position: relative;
                span{
                  font-size: 12px;
                  color: #999999;
                  position: absolute;
                  right: 0;
                }
              }
            }
          }
          .left{
            .p_text{
              border-top-left-radius: 0;
            }
          }
          .right{
            text-align: right;
            .user_name{
              position: absolute;
              top: -20px;
              right: 0;
              color: #999999;
            }
            .p_text{
              background-color: #4880FF;
              border-top-right-radius: 0;
              .Compile_body_format,span{
                color: #FFFFFF;
                .text_dow_name{
                  border-bottom: 1px solid #FFFFFF;
                  position: relative;
                  span{
                    font-size: 12px;
                    color: #FFFFFF;
                    position: absolute;
                    left: 0;
                    text-align: left;
                  }
                }
                .a_dow{
                  color: #FFFFFF;
                }
              }
            }
          }
        }
        .footer_enter{
          position: absolute;
          bottom: 0;
          z-index: 8;
          left: 0;
          right: 0;
          height: 60px;
          min-height: 60px;
          background-color: #ffffff;
          box-shadow: 0 0 5px rgba(0,0,0,0.1);
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 18px 15px;
          .enter_input{
            width: 90%;
            line-height: 20px;
            border: 0;
            margin: 0 10px;
            height: 100%;
            resize:none;
          }
          svg{
            font-size: 25px;
          }
          .icon{
            width: 20px;
            height: 20px;
          }
          .file_btn{
            position: relative;
            input[type="file"]{
              position: absolute;
              width: 25px;
              opacity: 0;
            }
          }
        }
      }
    }
  }
  .img_list{
    display: flex;
    flex-wrap: wrap;
    height: 300px;
    overflow: auto;
    .img_item{
      flex: 1;
      width: 35px;
      margin-bottom: 5px;
      cursor: pointer;
    }
  }
</style>
